<template>
  <div>
    <transition name="appear">
      <div
        class="changeBgOutBox"
        v-if="bgBoxFlag"
        :class="{ changeBgOutBoxDark: darkFlag }"
      >
        <div class="changeBgBox" :class="{ changeBgBoxDark: darkFlag }">
          <h1 style="margin-left: 10px">修改壁纸</h1>
          <span
            class="iconfont icon-guanbijiantou closeIcon"
            @click="closeBg"
          ></span>
          <p class="changeBgBoxP">本地壁纸：</p>
          <div class="locBox">
            <div
              class="imgBox"
              v-for="(item, index) in imgList"
              :key="index"
              @click="changeBg(item)"
            >
              <img :src="item" alt="" width="175px" height="120px" />
            </div>
          </div>
          <br />
          <hr />
          <br />
          <p class="changeBgBoxP">自定义壁纸：</p>
          <div class="ownBgBox" @click="changeBgOwn()">
            <div
              class="imgBox"
              style="box-shadow: 0 0 2px 2px rgba(137, 137, 137, 0.25)"
            >
              <img :src="imageUrl" alt="" width="175px" height="120px" />
            </div>
            <div class="upFileBtn imgBox">
              <input
                type="file"
                @change="getFile($event)"
                accept=".jpg,.png,.bmp,.jpeg,.psd"
              />
              <div class="fileCenter">
                <i class="el-icon-picture"></i>
                <p>上传壁纸</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import bus from "../bus";
export default {
  data() {
    return {
      bgBoxFlag: false,
      imageUrl: "",
      // darkFlag: false,
      imgList: [
        require("../assets/img/bg0.jpg"),
        require("../assets/img/bg1.jpg"),
        require("../assets/img/bg2.jpg"),
        require("../assets/img/bg3.jpg"),
        require("../assets/img/bg4.jpg"),
        require("../assets/img/bg5.jpg"),
        require("../assets/img/bg6.jpg"),
        require("../assets/img/bg7.jpg"),
        require("../assets/img/bg8.jpg"),
        require("../assets/img/bg9.jpg"),
      ],
    };
  },
  computed:{
    darkFlag(){
      return this.$store.state.darkFlag
    }
  },
  watch: {
    darkFlag: {
      handler() {
        let bgsrc = JSON.parse(window.localStorage.getItem("bgsrc"));
        if (!bgsrc || bgsrc.length == 0) {
          bgsrc = require("../assets/img/bg0.jpg");
        }
         if (this.imageUrl) {
        if (!this.darkFlag) {
          document.body.style.background = "url(" + this.imageUrl + ")";
          return;
        } else {
          document.body.style.background =
            "rgba(0, 0, 0, 0.15)  url(" + this.imageUrl + ")";
            return;
        }
      }
        if (!this.darkFlag) {
          console.log(1);
          document.body.style.background = "url(" + bgsrc + ")";
        } else {
          document.body.style.background =
            "rgba(0, 0, 0, 0.15)  url(" + bgsrc + ")";
        }
      },
    },
  },
  methods: {
    closeBg() {
      this.bgBoxFlag = false;
    },
    changeBg(src) {
      if (!this.darkFlag) {
        document.body.style.background = "url(" + src + ")";
      } else {
        document.body.style.background =
          "rgba(0, 0, 0, 0.15)  url(" + src + ")";
      }
      window.localStorage.setItem("bgsrc", JSON.stringify(src));
      this.closeBg();
    },
    changeBgOwn() {
      if (this.imageUrl) {
        if (!this.darkFlag) {
          document.body.style.background = "url(" + this.imageUrl + ")";
        } else {
          document.body.style.background =
            "rgba(0, 0, 0, 0.15)  url(" + this.imageUrl + ")";
        }
      }
    },
    getFile(e) {
      let file = e.target.files[0];
      let url = "";
      var reader = new FileReader();
      reader.readAsDataURL(file);
      let that = this;
      reader.onload = function () {
        url = this.result.substring(this.result.indexOf(",") + 1);
        that.imageUrl = "data:image/png;base64," + url;
        document.body.style.background = "url(" + that.imageUrl + ")";
        // window.localStorage.setItem("bgsrc", JSON.stringify(that.imageUrl));
      };
    },
  },
  mounted() {
    bus.$on("bgFlag", (flag) => {
      this.bgBoxFlag = flag;
    });
    bus.$on("bgFlag2", (flag) => {
      this.bgBoxFlag = flag;
    });
    bus.$on("darkFlag", (flag) => {
      this.darkFlag = flag;
    });
    let bgsrc = JSON.parse(window.localStorage.getItem("bgsrc"));
    if (!bgsrc || bgsrc.length == 0) {
      bgsrc = require("../assets/img/bg0.jpg");
      document.body.style.background = "url(" + bgsrc + ")";
    } else {
      document.body.style.background = "url(" + bgsrc + ")";
    }
  },
  beforeDestroy() {
    bus.$off();
  },
};
</script>

<style>
/* 取消img错误显示 */
img[src=""],
img:not([src]) {
  opacity: 0;
}
/* 出现过渡 */
.appear-enter-active,
.appear-leave-active {
  transition: all 0.3s;
}
.appear-enter,
.appear-leave-to {
  opacity: 0;
}
/* 毛玻璃背景 */
.changeBgOutBox {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(4px);
  z-index: 998;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}
.changeBgOutBoxDark {
  background-color: rgba(0, 0, 0, 0.3);
}
/* 主体 */
.changeBgBox {
  position: relative;
  width: 800px;
  max-height: 500px;
  height: 1000px;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: #fff;
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 0 5px 5px rgba(137, 137, 137, 0.25);
}
.changeBgBoxP {
  font-size: 20px;
  line-height: 40px;
  margin-left: 10px;
}
.changeBgBoxDark {
  background-color: rgba(48, 48, 48);
  color: #fff;
  box-shadow: 0 0 5px 5px rgba(137, 137, 137, 0.25);
}
.closeIcon {
  display: block;
  width: 30px;
  height: 30px;
  font-size: 24px !important;
  position: absolute;
  top: 30px;
  right: 20px;
  text-align: center;
  line-height: 24px;
  transition: all 0.2s;
}
.closeIcon:hover {
  color: red;
}
/* 本地壁纸 */
.locBox {
  width: 100%;
}
.imgBox {
  width: 175px;
  height: 120px;
  display: inline-block;
  overflow: hidden;
  margin: 10px 10px;
  border-radius: 10px;
}
.locBox img {
  transform-origin: center;
  transform: scale(1);
  transition: all 0.2s;
  object-fit: cover;
  cursor: pointer;
}
.locBox img:hover {
  transform: scale(1.1);
}
.locBox img:active {
  transform: scale(1) !important;
}
/* 自定义壁纸 */
.ownBgBox {
  width: 100%;
}
.ownBgBox img {
  transform-origin: center;
  transform: scale(1);
  transition: all 0.2s;
  object-fit: cover;
  cursor: pointer;
}
.ownBgBox img:hover {
  transform: scale(1.1);
}
.ownBgBox img:active {
  transform: scale(1) !important;
}
.upFileBtn {
  border: 1px rgb(180, 180, 180) dashed;
  position: relative;
}
.upFileBtn input {
  width: 175px;
  height: 120px;
  opacity: 0;
  position: absolute;
  top: 0px;
  left: 0px;
  cursor: pointer;
}
.fileCenter {
  width: 120px;
  height: 60px;
  margin: 35px 0 0 25px;
  text-align: center;
}
.fileCenter i {
  font-size: 30px;
}
/* 滚动条 */
.changeBgBox::-webkit-scrollbar {
  width: 6px;
}
.changeBgBox::-webkit-scrollbar-button {
  display: block;
  height: 20px;
}
.changeBgBox::-webkit-scrollbar-thumb {
  width: 6px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}
.changeBgBoxDark::-webkit-scrollbar-thumb {
  width: 6px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 6px;
}
</style>